<!--
 * @Author: linZeJian
 * @Date: 2022-08-24 10:53:55
 * @LastEditors: linZeJian
 * @LastEditTime: 2022-11-10 11:24:43
 * @Description: 
-->
<template>
  <div v-if="option.display">
    <uni-forms-item
      :label="option.label"
      :required="option.required"
      :rules="[{ required: option.required, errorMessage: '必填项不能为空' }]"
      :name="option.prop"
    >
      <div v-if="!detailValue">
        <!-- uni-file-picker不好用 -->
        <uni-file-picker
          v-model="fileList"
          file-mediatype="image"
          mode="grid"
          :placeholder="
            option.placeholder ? option.placeholder : '请选择' + option.label
          "
          :style="
            detailValue
              ? 'pointer-events: none;transform:scale(0.8);'
              : 'transform:scale(0.8);'
          "
          limit="1"
          :auto-upload="false"
          @select="select"
          @delete="deleteFunc"
        ></uni-file-picker>
      </div>
      <!-- 文件上传详情未适配 -->
      <div v-else>
        文件上传详情未适配
        {{value}}
      </div>
    </uni-forms-item>
  </div>
</template>

<script>
import { filebaseUrl } from "@/util/config/config.js";
export default {
  name: "auni-upload-custom",
  props: {
    option: Object,
    value: [String, Number, Array],
  },
  data() {
    return {
      fileList: [],
      comValueCopy: [],
    };
  },
  computed: {
    comValue: {
      get() {
        // console.log("this.option :>> ", this.option);
        // return this.value;
        // console.log("this.value11111", this.value);
        if (this.value == "" || this.value == undefined) {
          let valueArray = [];
          return valueArray;
        } else {
          // 文件回显预览需配置url
          let valueArray = this.value;
          // valueArray.forEach((item) => {
          //   let totalUrl =
          //     window.location.protocol +
          //     "//" +
          //     window.location.host +
          //     item.baseUrl;
          //   item.url = totalUrl;
          // });
          // console.log("2222222 :>> ", valueArray);
          return valueArray;
        }
      },
      set(val) {
        // 触发value绑定值的交互与更新
        // 处理上传文件
        // console.log("val", val);
        let handleValue = val;
        // handleValue.test = JSON.stringify(val);
        this.$emit("input", handleValue);
      },
    },
    // 处理详情模式
    detailValue() {
      if (this.option.detail) {
        return true;
      } else {
        return false;
      }
    },
  },
  created() {},
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler(newV) {},
    },
  },
  methods: {
    async select(e) {
      // 不返回文件流，需绑定云服务空间
      console.log("选择文件：", e);
      // 处理上传文件
      e.tempFiles.forEach(async (item, index) => {
        // 此时可以自行将文件上传至服务器
        let name = new Date().getTime();
        uni.uploadFile({
          url: `${filebaseUrl}/filebase/api/v1/app/formfile/${name}`, //仅为示例，非真实的接口地址
          filePath: e.tempFilePaths[index],
          name: "file",
          formData: {
            name: item.name,
          },
          success: (uploadFileRes) => {
            console.log("uploadFileRes.data", uploadFileRes.data);
            this.comValueCopy.push({
              filebaseId: JSON.parse(uploadFileRes.data).data,
              tempFilePaths: e.tempFilePaths[index],
            });
          },
        });
      });
      setTimeout(() => {
        this.comValue = this.comValueCopy;
        console.log("this.comValue222 :>> ", this.comValue);
      }, 1000);
    },

    deleteFunc(e) {
      console.log("e :>> ", e);
      let arr = [];
      this.comValue.forEach((item) => {
        if (item.tempFilePaths != e.tempFilePath) {
          arr.push(item);
        }
      });
      this.comValue = arr;
      this.comValueCopy = arr;
      setTimeout(() => {
        console.log("this.comValue222 :>> ", this.comValue);
      }, 1000);
    },
  },
};
</script>

<style></style>
